<template>
  <div class="content">
    <!-- 资源搜索框 -->
    <div class="search-input">
      <a-input-search
        v-model="req.keywords"
        size="large"
        allow-clear
        :loading="loading"
        :style="{ width: '680px' }"
        placeholder="请输入资源 名称|IP 敲回车键进行搜索"
        @press-enter="DoSearch"
        @search="DoSearch"
      />
    </div>
    <div class="search-table">
      <!-- 搜索结果展示 -->
      <!-- :total="50" show-total show-jumper show-page-size -->
      <a-table
        :data="resources"
        :pagination="pagination"
        @page-change="handlePageNumberChange"
        @page-size-change="handlePageSizeChange"
        row-key="meta.resource_id"
      >
        <template #columns>
          <a-table-column title="名称" data-index="spec.name"></a-table-column>
          <a-table-column
            title="实例Id"
            data-index="meta.resource_id"
          ></a-table-column>
          <a-table-column title="创建时间" data-index="meta.create_at">
            <template #cell="{ record }">
              <span> {{ ShowTime(record.meta.create_at) }}</span>
            </template>
          </a-table-column>
          <a-table-column
            title="实例类型"
            data-index="spec.resource_type"
          ></a-table-column>
          <a-table-column
            title="云服务商"
            data-index="spec.vendor"
          ></a-table-column>
          <a-table-column
            title="实例地域"
            data-index="spec.region"
          ></a-table-column>
          <a-table-column title="规格">
            <template #cell="{ record }">
              <span> {{ record.spec.cpu }}核/{{ record.spec.memory }}G</span>
            </template>
          </a-table-column>
          <a-table-column
            title="实例状态"
            data-index="status.phase"
          ></a-table-column>
          <a-table-column
            title="内网IP"
            data-index="status.private_ip"
          ></a-table-column>
          <a-table-column title="操作" align="center">
            <template #cell="{ record }">
              <a-space>
                <a-button
                  size="small"
                  type="text"
                  @click="
                    JumpToDetail(
                      record.spec.resource_type,
                      record.meta.resource_id
                    )
                  "
                >
                  详情
                </a-button>
              </a-space>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </div>
  </div>
</template>

<script setup>
import { SEARCH_RESOURCE } from "@/api/cmdb.js";
import { Message } from "@arco-design/web-vue";
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";

const pagination = reactive({
  total: 0,
  showTotal: true,
  showPageSize: true,
  defaultPageSize: 20,
});

// 数据加载中
const loading = ref(false);

// 搜索请求
const req = reactive({
  keywords: "",
  page_number: 1,
  page_size: pagination.defaultPageSize,
});

// 当前页发送变化
const handlePageNumberChange = (pn) => {
  req.page_number = pn;
  DoSearch();
};

// 分页大小发送变化时
const handlePageSizeChange = (ps) => {
  req.page_size = ps;
  req.page_number = 1;
  DoSearch();
};

// 搜索结果
const resources = ref([]);

const ShowTime = (ts) => {
  let d = new Date(ts * 1000);
  return `${d.getFullYear()}-${d.getMonth()}-${d.getDate()} ${d.getHours()}:${d.getMinutes()}`;
};

// 拉去数据的函数
const DoSearch = async () => {
  // 开启TableLoading状态
  loading.value = true;
  try {
    const resp = await SEARCH_RESOURCE(req);
    resources.value = resp.data.data.items;
    pagination.total = resp.data.data.total;
    console.log(resp);
  } catch (error) {
    Message.error(error);
  } finally {
    // 结束Loading状态
    loading.value = false;
  }
};

const router = useRouter();
const JumpToDetail = (resourceType, resourceId) => {
  console.log(resourceType, resourceId);
  switch (resourceType) {
    case "HOST":
      router.push({ name: "HostDetail", query: { resource_id: resourceId } });
      break;
    default:
      break;
  }
};
</script>

<style scoped>
.search-input {
  display: flex;
  justify-content: center;
  height: 50px;
}

.content {
  flex-direction: column;
}

.search-table {
  margin-top: 20px;
}
</style>
